<template>
  <div class="cinema-Add">
    <el-card class="box-card">
      <div slot="header" class="header">
        <span>添加电影</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="电影名称">
          <el-input v-model="form.name" placeholder="电影名称"></el-input>
        </el-form-item>
        <el-form-item label="电影分类">
          <el-input v-model="form.category" placeholder="电影分类"></el-input>
        </el-form-item>
        <el-form-item label="导演">
          <el-input v-model="form.director" placeholder="导演"></el-input>
        </el-form-item>
        <el-form-item label="上映时间">
          <div class="block">
            <el-date-picker v-model="form.premiereAt" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="评分">
          <el-input v-model="form.grade" placeholder="评分"></el-input>
        </el-form-item>
        <el-form-item label="语言">
          <el-input v-model="form.language" placeholder="语言"></el-input>
        </el-form-item>
        <el-form-item label="时长">
          <el-input v-model="form.runtime" placeholder="时长"></el-input>
        </el-form-item>
        <el-form-item label="产地">
          <el-input v-model="form.nation" placeholder="产地"></el-input>
        </el-form-item>
        <el-form-item label="电影类型">
          <el-input v-model="form.filmType" placeholder="电影类型"></el-input>
        </el-form-item>
        <el-form-item label="电影简介">
          <el-input type="textarea" :rows="2" placeholder="电影简介" v-model="form.synopsis"></el-input>
        </el-form-item>
        <el-form-item label="在售">
          <el-switch v-model="form.isSale" :active-text="form.isSale?'是':'否'" @change="changes"></el-switch>
        </el-form-item>
        <el-form-item label="预售">
          <el-switch
            v-model="form.isPresale"
            :active-text="form.isPresale?'是':'否'"
            @change="changess"
          ></el-switch>
        </el-form-item>

        <el-form-item label="海报">
          <el-upload
            action="http://gao.huruqing.cn:3000/admin/film/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handlePictureCard"
            multiple
           :limit="1"
            :on-exceed="handleExceed"
            ref='upload'          
       
          
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>

        <!-- <el-form-item label="剧照">
          <el-upload
            action="http://gao.huruqing.cn:3000/admin/film/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handlePictureCard2"
             ref='upload'
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading" :disabled="disabled">立即创建</el-button>
          <el-button @click="clearFilmAdd">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      value1: "",
      disabled: true,
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        category: "",
        director: "",
        premiereAt: "", //时间戳
        name: "", // 必须
        photos: [],
        poster: "",
        grade: "",
        language: "",
        runtime: "",
        filmType: "",
        isPresale: true,
        timeType: "3",
        // isSale: false,
        synopsis: "",
        nation: ""
      },
      loading: false,
      clearAdd: false,
      isSubmit: false,

      //上映时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();

              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  created() {},
  watch: {},
  methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 张海报，本次共选择了${files.length}1张海报`);
      },
    changes(value) {
      console.log(value);
      this.form.isPresale = !value;
      //  this.form.isPresale=value
    },
    changess(value) {
      this.form.isSale = !value;
    },

    //时间格式
    // formTime(time){
    //   console.log(typeof Number(time))
    //   let date= new Date(time)

    //   console.log("时间戳：", String(date.getTime()))
    //   return String(date.getTime())
    // },

    //清除内容
    clearFilmAdd() {
      (this.form = {
        category: "",
        director: "",
        // premiereAt: "",
        name: "", // 必须
        photos: [],
        poster: "",
        grade: "",
        language: "",
        runtime: "",
        filmType: "",
        timeType: "",
        isSale: false,
        synopsis: "",
        nation: ""
      }),
        this.$refs.upload.clearFiles();
    },
    //电影上传图片
     handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 张海报，共选择了 ${files.length + fileList.length} 张海报`);
      },
    handlePictureCard(response, file, fileList) {
      // console.log(file);
      console.log(response);
      this.disabled = false;
      this.form.poster = response.image.url;
      console.log(this.form.poster);
    },
    handlePictureCard2(response, file, fileList) {
      // console.log(file);
      console.log(response);

      this.form.photos.push(response.image.url);
      console.log(this.form.photos);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //清除数据
    clear() {
      this.clearAdd = true;
      this.form = {
        cityId: "",
        cityName: "",
        areaId: "",
        name: "",
        address: "",
        lowPrice: "",
        areaName: ""
      };
    },

    onSubmit() {
      // this.form.premiereAt=this.formTime( this.form.premiereAt)
      console.log("this.form", this.form);
      this.loading = true;
      this.isSubmit =
        this.form.nation &&
        this.form.category &&
        this.form.director &&
        this.form.grade &&
        this.form.language &&
        this.form.runtime &&
        this.form.filmType &&
        this.form.synopsis;

      if (this.isSubmit) {
        const url = "/film/add";
        this.$axios
          .post(url, this.form)
          .then(res => {
            this.$message.success("添加数据成功");
            this.loading = false;
            console.log(res);
          })
          .catch(err => {
            this.loading = false;
            console.log("错误啦", err);
            console.log(err);
          });
      } else {
        this.$message.error("缺少数据哦！！！");
        this.loading = false;
      }

      console.log("submit!");
    }
  }
};
</script>
<style lang="less" scoped>
//上映时间
.el-date-editor {
  width: 100%;
}

</style>
<style lang="less" scoped>
.el-form {
  width: 500px;
}
.header {
  font-size: 22px;
}
</style>